<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- v-for -->
    <ul id="example-1">
        <li v-for="item in items" :key="item.message">
          {{ item.message }}
        </li>
    </ul>

    <ul id="example-2">
        <li v-for="(item, index) of items">
          {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
    </ul>

    <!-- 遍历对象 -->
    <!-- <ul id="v-for-object" class="demo">
        <li v-for="value in object">
          {{ value }}
        </li>
    </ul> -->
    <!-- key-value都获取 -->
    <!-- <ul id="v-for-object">
        <li v-for="(value, name) in object">
            {{ name }}: {{ value }}
        </li>
    </div> -->

    <ul id="v-for-object">
        <li v-for="(value, name, index) in object">
            {{ index }}. {{ name }}: {{ value }}
        </li>
    </ul>

    <!-- 数组 -->
    <ul id="v-for-array">
        <li v-for="n in evenNumbers">{{ n }}</li>
    </ul>

    <div id="v-for-sets">
        <ul v-for="set in sets">
            <li v-for="n in even(set)">{{ n }}</li>
        </ul>
    </div>

    <!-- 在 v-for 里使用范围值 -->
    <div id="v-for-number">
        <span v-for="n of 10">{{ n }} </span>
    </div>

    <!-- 不推荐在同一元素上使用 v-if 和 v-for -->
    <li v-for="todo in todos" v-if="!todo.isComplete">
        {{ todo }}
    </li>

    <!-- 在组件上使用 v-for -->
    <my-component
        v-for="(item, index) in items"
        v-bind:item="item"
        v-bind:index="index"
        v-bind:key="item.id"
    ></my-component>

    <!-- 综合示例 -->
    <div id="todo-list-example">
        <form v-on:submit.prevent="addNewTodo">
          <label for="new-todo">Add a todo</label>
          <input
            v-model="newTodoText"
            id="new-todo"
            placeholder="E.g. Feed the cat"
          >
          <button>Add</button>
        </form>
        <ul>
          <li
            is="todo-item"
            v-for="(todo, index) in todos"
            v-bind:key="todo.id"
            v-bind:title="todo.title"
            v-on:remove="todos.splice(index, 1)"
          ></li>
        </ul>
    </div>
</body>
    <script>
        var example1 = new Vue({
            el: '#example-1',
            data: {
                items: [
                    { message: 'Foo' },
                    { message: 'Bar' }
                ]
            }
        })

        var example2 = new Vue({
            el: '#example-2',
            data: {
                parentMessage: 'Parent',
                items: [
                    { message: 'Foo' },
                    { message: 'Bar' }
                ]
            }
        })

        new Vue({
            el: '#v-for-object',
            data: {
                object: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2016-04-10'
                }
            }
        })

        new Vue({
            el: '#v-for-array',
            data: {
                numbers: [ 1, 2, 3, 4, 5 ]
            },
            computed: {
                evenNumbers: function () {
                        return this.numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            }
        })

        new Vue({
            el: '#v-for-sets',
            data: {
                sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
            },
            methods: {
                even: function (numbers) {
                        return numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            }
        })

        new Vue({
            el: '#v-for-number'
        })

        Vue.component('todo-item', {
            template: '\
                <li>\
                {{ title }}\
                <button v-on:click="$emit(\'remove\')">Remove</button>\
                </li>\
            ',
            props: ['title']
        })

        new Vue({
            el: '#todo-list-example',
            data: {
                newTodoText: '',
                todos: [
                    {
                        id: 1,
                        title: 'Do the dishes',
                    },
                    {
                        id: 2,
                        title: 'Take out the trash',
                    },
                    {
                        id: 3,
                        title: 'Mow the lawn'
                    }
                ],
                nextTodoId: 4
            },
            methods: {
                addNewTodo: function () {
                    this.todos.push({
                        id: this.nextTodoId++,
                        title: this.newTodoText
                    })
                    this.newTodoText = ''
                }
            }
        })
    </script>
</html>